<template>
  <view class="container">
    <view class="title">语法</view>
    <image class="logo" src="/static/cat.png" mode="widthFix"></image>
    <view class="content-item">Hello</view>
    <view class="content-item">2</view>
    <view class="content-item">YES</view>
    <view class="content-item">hello hi</view>
    <view class="json-item" style="color: red;" v-for="(item, index) in jsonList" :key="index">
      {{item}}
    </view>
    <view class="number-item" style="color: green;" v-for="(num, index) in numbers" :key="index">
      {{num}}
    </view>
    <view class="info-item" v-for="(info, index) in infoList" :key="index">
      {{index}}---{{info.type}}---{{info.content}}
    </view>
    <view class="list-item" v-for="(item, index) in nameList" :key="index">
      {{index + 1}}:{{item}}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      jsonList: [
        '{"id":1,"name":"uni-app"}',
        '{"id":2,"name":"HTML"}',
        '{"id":3,"name":"wechat"}',
        '{"id":4,"name":"Android"}'
      ],
      numbers: [2, 3, 4, 5, 6, 7],
      infoList: [
        { type: "title", content: "How to do lists in Vue" },
        { type: "author", content: "Jane Doe" },
        { type: "publishedAt", content: "2020-04-10" }
      ],
      nameList: ["uni-app", "HTML", "wechat", "Android"]
    };
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}
.content-item, .json-item, .number-item, .info-item, .list-item {
  margin-bottom: 5px;
}
</style>